﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="DateEdit#DateRange" />Date Range</h2>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCalendar-1.MinDate">MinDate</a>
        and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCalendar-1.MaxDate">MaxDate</a> properties
        to specify a range of available dates. The Blazor Date Edit's calendar disables dates that are out of range and hides navigation arrows as appropriate.
        If a user enters a date that is out of range, the DevExpress Blazor Date Edit retains the previously selected date.
    </p>
    <p>
        In this demo, the Blazor Date Edit component allows users to select dates within the current month.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode">
            <TitleTemplate>
                Date: <b>@DateTimeValue.ToString("dddd, dd MMMM yyyy")</b>
            </TitleTemplate>
        </DemoToolbar>
    </div>
    <div class="card-body mw-480">
        <DxDateEdit @bind-Date="@DateTimeValue" SizeMode="SizeMode" MinDate="@MinDate" MaxDate="@MaxDate"></DxDateEdit>
    </div>
</div>

<CodeSnippet_Editor_DateEdit_MinMaxDate/>

@code {
    DateTime DateTimeValue { get; set; } = DateTime.Now;
    DateTime MinDate { get; set; }
    DateTime MaxDate { get; set; }

    protected override void OnInitialized() {
        MinDate = new DateTime(DateTimeValue.Year, DateTimeValue.Month, 1);
        MaxDate = new DateTime(DateTimeValue.Year, DateTimeValue.Month, DateTime.DaysInMonth(DateTimeValue.Year, DateTimeValue.Month));
    }
}
